<template>
  <div>
    <t-popup
      overlayClassName="popup"
      class="placement top center"
      content="将此展览添加到我的关注"
      placement="left"
      showArrow
      destroyOnClose
    >
      <div class="star-box-pablish" @click="setFollow">
        <t-icon alt="" name="star-filled" v-if="FollowType" style="color: #f2995f" />
        <t-icon name="star" src="http://static.wuzhan.art/assets/img/templateStart.png" alt="" v-else />
      </div>
    </t-popup>
    <messageModel
      submitText="前往"
      title="提示"
      :visible="visibleMessage1"
      problem="您暂未登录"
      message="是否前往登录？"
      @closeClick="closeClick"
      @submitClick="pathSubmitClick"
    />
  </div>
</template>
<script setup lang="ts">
// @ts-nocheck
import { doorUrl } from '@/utils/minxin';
import messageModel from '@/components/messageModel/index.vue';
import { getHeardToken } from '@/api/utils';
import { pathList } from './data';
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useProjectStore } from '@/store';
import { templateIsFollow } from '@/api/project/project';
import { AddFollow } from '@/api/door/door';

const visibleMessage1 = ref(false);
const store = useProjectStore();
const route = useRoute();
const FollowType = ref(false);
const init = () => {
  templateIsFollow(route.query.projectId).then((res) => {
    if (res.statusCode == 200) {
      // console.log('res.data', res.data);

      FollowType.value = res.data;
    }
  });
};
const closeClick = () => {
  //取消
  visibleMessage1.value = false;
};
const pathSubmitClick = () => {
  //确认登陆

  visibleMessage1.value = false;
  let url = window.location.href;
  let redirectUrl = doorUrl + 'login?redirect=' + url;
  window.location.href = redirectUrl;
};
const setFollow = async () => {
  let token = getHeardToken();
  if (!token) {
    visibleMessage1.value = true;
    return;
  }
  try {
    let { data } = await AddFollow({
      refType: 3,
      refId: localStorage.getItem('projectId'),
    });
    FollowType.value = data;
  } catch {}
};
init();
</script>

<style scoped lang="less">
// .star-box-pablish {
//   // cursor: pointer;
//   position: relative;
//   // text-align: center;
//   // z-index: 666;
//   // bottom: 80px;
//   // right: 30px;
//   // width: 50px;
//   // height: 50px;
//   // border-radius: 50%;
//   // img {
//   //   width: 50px;
//   //   height: 50px;
//   // }

//   width: 100%;
//   height: 100%;
//   .t-icon{
//     position: absolute;
//     left: 20;
//   }
// }
// #template1-box {
//   :deep(.t-popup__content) {
//     background-color: #333;
//     color: #fff;
//     border-color: #333;
//     box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
//     width: 200px;
//   }
//   :deep(.placement) {
//     border-color: #333;
//     background: transparent !important;
//   }
//   :deep(.t-popup[data-popper-placement^='left'] .t-popup__arrow::before) {
//     background-color: #333;
//     border-color: #333;
//   }
// }
.star-box-pablish {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}
</style>
